
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>敲木鱼 减bug</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #080808; /* 修改背景颜色 */
        }

        #woodfish {
            width: 250px;
            cursor: pointer;
            transition: transform 0.2s; /* 添加过渡效果 */
            user-select: none; /* 禁用文本选择效果 */
            user-drag: none; /* 禁用拖动效果 */
            -webkit-tap-highlight-color: transparent;
        }

        #counter {
            font-size: 24px;
            margin-top: 20px;
            color: #ffffff;
        }

        #clear-button {
            background-color: #000000; /* 按钮背景颜色 */
            border: 2px solid #ffffff; /* 按钮边框颜色 */
            color: #ffffff; /* 文字颜色 */
            padding: 10px 20px;
            cursor: pointer;
            margin-top: 40px;
        }

        #err-message {
            color: #ffffff;
            font-size: 20px;
            position: absolute;
            top: 20%; /* 固定在木鱼上方 */
            opacity: 0; /* 初始时透明 */
            transition: opacity 1s ease-out, transform 1s ease-out; /* 添加淡出和移动过渡效果 */
            transform: translateY(0); /* 初始时位置 */
        }
    </style>
</head>
<body>
    <img id="woodfish" src="./static/images/muyu.png" alt="木鱼">
    <div id="counter">0</div>
    <button id="clear-button">重置</button>
    <div id="err-message"></div>

    <script>
        const woodfish = document.getElementById('woodfish');
        const counter = document.getElementById('counter');
        const clearButton = document.getElementById('clear-button');
        const errMessage = document.getElementById('err-message');
        let clickCount = 0;
        let lastClickTime = 0;

        // 播放敲木鱼的声音
        function playWoodfishSound() {
            const audio = new Audio('./static/mp3/muyu.mp3');
            audio.play();
        }

        // 显示提示消息
        function showErrorMessage() {
            errMessage.textContent = '莫要浮躁，心静才能减bug';
            errMessage.style.opacity = '1';
            errMessage.style.transform = 'translateY(20px)';
            setTimeout(() => {
                errMessage.style.opacity = '0';
                errMessage.style.transform = 'translateY(0)';
            }, 2000); // 2秒后淡出并回到初始位置隐藏
        }

        // 更新计数器并播放声音
        function updateCounterAndPlaySound() {
            const currentTime = Date.now();
            if (currentTime - lastClickTime < 500) {
                // 点击间隔小于500ms，显示提示消息
                showErrorMessage();
            } else {
                clickCount++;
                counter.textContent = clickCount;
                playWoodfishSound();
            }
            lastClickTime = currentTime;

            // 添加点击后的放大效果
            woodfish.style.transform = 'scale(1.1)';
            setTimeout(() => {
                woodfish.style.transform = 'scale(1)';
            }, 200); // 200毫秒后恢复原大小
        }

        // 监听木鱼的点击事件
        woodfish.addEventListener('click', updateCounterAndPlaySound);

        // 清零按钮点击事件
        clearButton.addEventListener('click', () => {
            clickCount = 0;
            counter.textContent = clickCount;
        });
    </script>
</body>
</html>
